<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<!--导入Google Maps API库文件。注意将本代码中的API Key替换为前文申请到的API Key-->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA1j86tnUDFv8OAtC8dZVtKRT8YXSkg32FmSueYimfV_yj5DJguRRW5eQHwEBk10jwkDxLKNltT_kuQA" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
//注意:在Javacript代码块里嵌入CDATA段可以防止不兼容Javacript的浏览器不产生错误信息
//这是一个编写网页的好习惯

    var map;  //全局GMap

    //网页加载时用于初始化Google地图
    
    function load()
    {
      if (GBrowserIsCompatible())  //检查浏览器兼容性
                                  //如果浏览器无法满足加载Google地图的最低条件，则不进行进一步操作
                                  //这是编写Google地图网页的一个值得推荐的做法
      {
        //创建GMap2对象
        map = new GMap2(document.getElementById("map"));
        
        //显示地图，并设置其中心，缩放值
        //缩放级别设得比较小，这样就可以看到世界地图了
        map.setCenter(new GLatLng(37.4419, -122.1419), 2);
      }
    }
    
    //移动地图中心到北京
    function moveMap()
    {
      //北京的经纬度分别为39.92, 116.46
      map.panTo(new GLatLng(39.92, 116.46));
    }
    
    //改变地图类型为混合地图
    function changeMapType()
    {
      map.setMapType(G_HYBRID_MAP);
    }
    //]]>
    </script>
  </head>
  <!--加载时调用load()函数加载地图，注意加上onunload="GUnload()"防止内存泄露-->
  <body onload="load()" onunload="GUnload()">
    <!--以下id为map的DIV元素即为Google地图的容器-->
    <div id="map" style="width: 500px; height: 300px"></div>
    <input type="button" value="移动地图中心" onclick="moveMap()" />
    <input type="button" value="改变地图类型" onclick="changeMapType()" />
  </body>
</html>
